<template>
    <div>
        <Header></Header>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div style="margin-left: 750px;margin-bottom: 20px">
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </div>
            <el-form-item label="标题" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
            </el-form-item>

            <el-form-item label="摘要" prop="description">
                <el-input type="textarea" v-model="ruleForm.description"></el-input>
            </el-form-item>

            <el-form-item label="正文" prop="content">
                <mavon-editor v-model="ruleForm.content"></mavon-editor>
            </el-form-item>
<!--            <el-form-item>-->
<!--                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>-->
<!--                <el-button @click="resetForm('ruleForm')">重置</el-button>-->
<!--            </el-form-item>-->
        </el-form>
    </div>
</template>

<script>
    import Header from "../components/Header";
    export default {

        name: "BlogEdit",
        components: {Header},
        data() {
            return {

                ruleForm: {
                    userId: '',
                    id: '',
                    title: '',
                    description: '',
                    content: ''
                },
                rules: {
                    title: [
                        { required: true, message: '请输入标题', trigger: 'blur' },
                        { min: 3, max: 150, message: '长度在 3 到 150 个字符', trigger: 'blur' }
                    ],
                    description: [
                        { required: true, message: '请输入摘要', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '请输入正文', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //弹窗添加还是修改
                        const msg = this.ruleForm.id?'修改':'添加'
                        this.$confirm('确认是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {

                            const that = this
                            that.$axios.post('/blog/edit',that.ruleForm).then(rest => {
                                that.$router.push('/')
                                console.log(rest.data)
                            })

                            this.$message({
                                type: 'success',
                                message: msg+'成功!'
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消'+msg
                            });
                        });


                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        created() {
            //将登录者id赋值给博客作者
            this.ruleForm.userId = this.$store.getters.getUser.id

            const blogId = this.$route.params.blogId
            //编辑
            if (blogId){
                this.ruleForm.id = blogId
                const that = this
                this.$axios.get('/blog/list/'+blogId).then(rest => {
                    that.ruleForm.title = rest.data.data.title
                    that.ruleForm.description = rest.data.data.description
                    that.ruleForm.content = rest.data.data.content
                })
            }
        }

    }
</script>

<style scoped>
    .demo-ruleForm{
        max-width: 960px;
        margin: 0 auto;
    }
</style>